<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>email</title>
</head>
<body>
<el-form size="medium" label-position="top" :model="changeEmailForm" status-icon
         :rules="rulesEmail"
         ref="changeEmailForm" label-width="100px"
         class="demo-ruleForm">
    <el-form-item label="New Email" prop="email">
        <el-input v-model="changeEmailForm.email" autocomplete="off"></el-input>
    </el-form-item>
    </br>
    <el-form-item style="float:right">
        <el-button type="primary" @click="submitForm('changeEmailForm')">Change Email</el-button>
        <el-button @click="resetForm('changeEmailForm')">Reset</el-button>
    </el-form-item>
</el-form>
</body>
<script>
    var vue = new Vue({
        delimiters: ['[[', ']]'],
        el: '#menu',
        data() {
            return {
                show: 1,
                profile: {
                    username: 'unknown',
                    email: 'unknown',
                    website: '',
                    description: '',
                    phone: '',
                    sex: 'unknown'
                },
                changePassForm: {
                    oldPass: '',
                    pass: '',
                    checkPass: ''
                },
                changeEmailForm: {
                    email: ''
                },
                changeUsernameForm: {
                    username: ''
                },
                rulesProfile: {
                    website: [{validator: validateWebsite, trigger: 'blur'}],
                    description: [{validator: validateDescription, trigger: 'blur'}],
                    phone: [{validator: validatePhone, trigger: 'blur'}],
                    sex: [{validator: validateSex, trigger: 'blur'}]
                },
                rulesPass: {
                    oldPass: [
                        {required: true, validator: validateOldPass, trigger: 'blur'}
                    ],
                    pass: [
                        {required: true, validator: validateNewPass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {required: true, validator: validatePass2, trigger: 'blur'}
                    ]
                },
                rulesEmail: {
                    email: [{required: true, validator: validateEmail, trigger: 'blur'}]
                },
                rulesUsername: {
                    username: [{required: true, validator: validateUsername, trigger: 'blur'}]
                },
                options: [{
                    value: 'unknown',
                    label: 'unknown'
                }, {
                    value: 'male',
                    label: 'male'
                }, {
                    value: 'female',
                    label: 'female'
                }]
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (formName == "changePassForm") {
                            var temp = this;
                            $.ajax({
                                url: "/me/changePassword",
                                type: "POST",
                                data: {"oldPass": this.changePassForm.oldPass, "newPass": this.changePassForm.pass},
                                success: function (data1) {
                                    var msg = JSON.parse(data1);
                                    if (msg["msg"] == "success") {
                                        temp.$message({
                                            message: 'You have successfully changed your password!',
                                            type: 'success'
                                        });
                                        temp.logout();
                                    }
                                    else if (msg["msg"] == "fail") {
                                        temp.$message.error('invalid password.');
                                    }
                                }
                            })
                        }
                        else if (formName == "changeEmailForm") {
                            var temp = this;
                            $.ajax({
                                url: "/me/changeEmail",
                                type: "POST",
                                data: {"email": this.changeEmailForm.email},
                                success: function (data1) {
                                    var msg = JSON.parse(data1);
                                    if (msg["msg"] == "success") {
                                        temp.$message({
                                            message: 'You have successfully changed your email!',
                                            type: 'success'
                                        });
                                    }
                                    else if (msg["msg"] == "fail") {
                                        temp.$message.error(msg['info']);
                                    }
                                },
                                error: function (data2) {
                                    temp.$message.error('server error!');
                                }
                            })
                        }
                        else if (formName == 'profileForm') {
                            var temp = this;
                            $.ajax({
                                url: "/me/changeProfile",
                                type: "POST",
                                data: {
                                    "website": this.profile.website, "description": this.profile.description,
                                    "phone": this.profile.phone, "sex": this.profile.sex
                                },
                                success: function (data1) {
                                    var msg = JSON.parse(data1);
                                    if (msg["msg"] == "success") {
                                        temp.$message({
                                            message: 'You have successfully changed your profile!',
                                            type: 'success'
                                        });
                                    }
                                    else if (msg["msg"] == "fail") {
                                        temp.$message.error(msg['info']);
                                    }
                                },
                                error: function (data2) {
                                    temp.$message.error('server error!');
                                }
                            })
                        }
                        else if (formName == 'changeUsernameForm') {
                            var temp = this;
                            $.ajax({
                                url: "/me/changeUsername",
                                type: "POST",
                                data: {
                                    "username": this.changeUsernameForm.username
                                },
                                success: function (data1) {
                                    var msg = JSON.parse(data1);
                                    if (msg["msg"] == "success") {
                                        temp.$message({
                                            message: 'You have successfully changed your username!',
                                            type: 'success'
                                        });
                                    }
                                    else if (msg["msg"] == "fail") {
                                        temp.$message.error(msg['info']);
                                    }
                                },
                                error: function (data2) {
                                    temp.$message.error('server error!');
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                })
                ;
            },
            resetForm(formName) {

                this.$refs[formName].resetFields();
            }
            ,
            logout() {
                window.location.href = ("/logout");
            }
            ,
            editProfile() {
                window.location.href = ("/edit");
            }
            ,
            photosuccess() {
                this.$message.success('update profile photo success!');
                window.location.href("/edit");
            }
            ,
            photobefore(file) {
                const isType = (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/bmp');

                if (!isType) {
                    this.$message.error('Just PNG, JPG, GIF, BMP Available!');
                    return false;
                }

                return true;
            },
        }
    });
</script>
</html>